<template>
    <div class="edit-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px" destroy-on-close>
            <el-form ref="dialogFormRef" :model="state.content" :rules="formRules" size="default" label-width="100px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="name" label="账户名称">
                            <el-input v-model="state.content.name" placeholder="请输入账户名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="cashTotal" label="现金次数">
                            <el-input-number :max="9999" v-model="state.content.cashTotal" placeholder="请输入现金次数"
                                clearable></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="allowanceTotal" label="津贴次数">
                            <el-input-number :max="9999" v-model="state.content.allowanceTotal" placeholder="请输入津贴次数"
                                clearable></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="subsidyTotal" label="补贴次数">
                            <el-input-number :max="9999" v-model="state.content.subsidyTotal" placeholder="请输入补贴次数"
                                clearable></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="cashAmount" label="现金额度">
                            <el-input-number :max="9999" v-model="state.content.cashAmount" placeholder="请输入现金额度"
                                clearable></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="allowanceAmount" label="津贴额度">
                            <el-input-number :max="9999" v-model="state.content.allowanceAmount" placeholder="请输入津贴额度"
                                clearable></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="subsidyAmount" label="补贴额度">
                            <el-input-number :max="9999" v-model="state.content.subsidyAmount" placeholder="请输入补贴额度"
                                clearable></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="status" label="状态">
                            <el-select v-model.number="state.content.status" class="m-2" placeholder="请选择账户状态">
                                <el-option v-for="item in state.statusOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="employeeCode" label="关联人员">
                            <el-select v-model="state.content.employeeCode" filterable remote reserve-keyword
                                placeholder="请输入需要关联人员名称" :remote-method="searchEmployee"
                                :loading="state.dialog.isShowLoading">
                                <el-option v-for="item in state.employeeCodeOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="categoryCode" label="关联钱包类别">
                            <el-select v-model="state.content.categoryCode" class="m-2" placeholder="请选择账户状态">
                                <el-option v-for="item in state.categoryOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onSubmitContinue" type="primary" size="default" v-if="state.dialog.type === 0">{{
                        t('message.btnName.continueSubmit')
                    }}</el-button>
                    <el-button @click="onSubmit" type="success" size="default">{{ t('message.btnName.submit')
                    }}</el-button>
                    <el-button @click="onCancel" size="default">{{ t('message.btnName.cancel') }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" >
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { ElMessage } from 'element-plus';
import { usePersonEmployeePageApi } from '/@/api/person/employee';
import { usePosCategoryListApi } from '/@/api/pos/category';
import { usePosWalletCreateApi, usePosWalletQueryApi, usePosWalletUpdateApi } from '/@/api/pos/wallet';

// 定义子组件向父组件传值/事件
const { t } = useI18n();
const emit = defineEmits(['refresh']);

// 定义变量内容
const dialogFormRef = ref();

const useContent = () => {
    return {
        name: '',
        cashTotal: 0,
        allowanceTotal: 0,
        subsidyTotal: 0,
        cashAmount: 0,
        allowanceAmount: 0,
        subsidyAmount: 0,
        status: null,
        employeeCode: '',
        categoryCode: '',
    }
}

const state = reactive({
    content: {} as any,
    dialog: {
        isShowDialog: false,
        type: 0,
        title: '',
        isShowLoading: false,
    },
    statusOptions: [
        {
            value: 1,
            label: '正常',
        },
        {
            value: 2,
            label: '挂失',
        },
        {
            value: 3,
            label: '黑名单',
        },
    ],
    categoryOptions: [] as any,
    employeeCodeOptions: [] as any,
});

// 表单校验
const formRules = ref({
    code: [
        { required: true, message: '必填项不能为空', trigger: 'blur' },
        { min: 1, max: 40, message: '工号必须1-40位字母数字组合而成', trigger: 'blur' },
        // { pattern: /^[a-z1-9]/, message: '工号必须非0数字或小写字母开头', trigger: 'blur' },
    ],
    name: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
    mobile: [{ pattern: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, message: '请输入正确手机号', trigger: 'blur' },],
})

const searchEmployee = (query: string) => {
    if (query) {
        state.dialog.isShowLoading = true
        console.log(query)
        usePersonEmployeePageApi({ name: query }).then(({ content }) => {
            state.employeeCodeOptions = content.list.map((item: any) => {
                return {
                    value: item.code,
                    label: item.name,
                }
            })
            state.dialog.isShowLoading = false
            console.log(state.employeeCodeOptions)
        })
    } else {
        state.employeeCodeOptions = []
    }
}

const getCategoryList = () => {
    usePosCategoryListApi().then(({ content }) => {
        state.categoryOptions = content.map((item: any) => {
            return {
                value: item.code,
                label: item.name,
            }
        })
        console.log(state.categoryOptions)
    })
}


// 打开弹窗
const openDialog = async (code?: string) => {
    state.dialog.isShowDialog = true
    if (code) {
        state.dialog.title = t('message.btnName.edit')
        state.dialog.type = 1
        queryItem(code)
    } else {
        state.dialog.title = t('message.btnName.addRow')
        state.dialog.type = 0
        state.content = useContent()
        getCategoryList()
    }
};
// 关闭弹窗
const closeDialog = () => {
    state.dialog.isShowDialog = false;
    state.content = useContent()
    emit('refresh');
};
// 取消
const onCancel = () => {
    closeDialog();
};
const queryItem = (code: string) => {
    usePosWalletQueryApi(code).then(({ content }) => {
        state.content = content
        state.employeeCodeOptions = [{
            label: content.employeeName,
            value: content.employeeCode
        }]
        state.categoryOptions = [{
            label: content.categoryName,
            value: content.categoryCode
        }]
    })
}
// 提交
const onSubmit = () => {
    if (state.dialog.type === 1) {
        usePosWalletUpdateApi(state.content).then(({ content }) => {
            console.log(content);
        }).then(() => {
            closeDialog()
        })
    } else {
        usePosWalletCreateApi(state.content).then(({ content }) => {
            console.log(content);
        }).then(() => {
            closeDialog()
        })
    }
};
// 提交
const onSubmitContinue = () => {
    usePosWalletCreateApi(state.content).then(() => {
        ElMessage({
            type: 'success',
            message: '新增成功'
        })
    }).then(() => {
        state.content = useContent()
    })
};

defineExpose({
    openDialog,
});
</script>


<style scoped lang="scss">
:deep(.el-dialog__header) {
    margin: 0;
    border-bottom: 1px dashed rgba(0, 0, 0, .2);
}

:deep(.el-dialog__footer) {
    border-top: 1px dashed rgba(0, 0, 0, .2);
}
</style>